<template>
  <el-dialog width="60%" title="更新用户" :visible.sync="updUserDialogVisible" 
  :close-on-click-modal="false">
    <!-- 跟新用户表单 -->
    <el-form :model="userFormInfo" ref="userFormRef" label-width="100px" :rules="rules">
      <!-- id -->
      <el-form-item label="用户ID" prop="id">
        <el-input v-model="userFormInfo.id" disabled />
      </el-form-item>

      <!-- username -->
      <el-form-item label="用户名" prop="username">
        <el-input v-model="userFormInfo.username" />
      </el-form-item>

      <!-- email -->
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="userFormInfo.email" />
      </el-form-item>

      <!-- phoneNum -->
      <el-form-item label="电话号码" prop="phoneNum">
        <el-input v-model="userFormInfo.phoneNum" />
      </el-form-item>

      <!-- status -->
      <el-form-item label="激活状态" prop="status">
        <el-radio-group v-model="userFormInfo.status" size="small">
          <el-radio-button label="1">激活</el-radio-button>
          <el-radio-button label="0">未激活</el-radio-button>
        </el-radio-group>
      </el-form-item>

      <!-- 权限 -->
      <el-form-item label="选择权限" prop="roles">
        <el-cascader
          v-model="userFormInfo.roles"
          :options="rolesCascader"
          :props=" {multiple: true}"
        />
      </el-form-item>
    </el-form>

    <!-- 按钮区域 -->
    <span slot="footer">
      <el-button @click="closeDialog()">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
// 网络
import { getUserInfo, getAllRoles, updateUser } from '@/network/homeRequest.js'

export default {
  data() {
    return {
      updUserDialogVisible: false, // dialog开关
      userFormInfo: {}, // 用户表单信息
      rolesCascader: [], // 级联选择器数据
      rules: {
        username: [{required: true, message: '用户名填写完整', trigger: 'blur'}],
        email: [{required: true, message: '邮箱填写完整', trigger: 'blur'}],
        phoneNum: [{validator: this.validPhone, trigger: 'blur'}],
        status: [{required: true, message: '状态必填', trigger: 'blur'}],
        roles: [{ required: true, message: '填写选择内容', trigger: 'change' }]
      }
    }
  },
  methods: {
    /**
     * 提交表单
     */
    async submitForm() {
      const ret = await this.$refs['userFormRef'].validate().catch(e => e);
      if (!ret) { return this.$message.error('请将表单填写完整'); }
      
      // 请求
      const roles = [];
      this.userFormInfo.roles.forEach(item => roles.push({id: item[0]}))
      this.userFormInfo.roles = roles;
      const {meta} = await updateUser(this.userFormInfo);
      if (meta.status != 200) { return this.$message.error(meta.msg); }
      
      // success
      this.updUserDialogVisible = false;
      this.$bus.$emit('getUserList');
      return this.$message.success(meta.msg);
    },
    
    /**
     * 关闭dialog
     */
    closeDialog() {
      this.updUserDialogVisible = false;
      this.$refs['userFormRef'].resetFields(); // 清除验证
    },

    /**
     * 根据id获取User信息
     */
    async getUser(uid) {
      const { meta, data } = await getUserInfo(uid)
      // console.log(meta);
      if (meta.status != 200) {
        return this.$message.error(meta.msg)
      }

      this.userFormInfo = data.user
    },

    /**
     * 获取所有角色
     */
    async getRoles() {
      const { meta, data } = await getAllRoles()
      if (meta.status != 200) {
        return this.$message.error(meta.msg)
      }

      const arr = []
      data.roles.forEach(item => {
        arr.push({ label: item.roleName, value: item.id })
      })
      this.rolesCascader = arr
      // console.log(this.rolesCascader);
    },

    /**
     * 开启dialog回调
     */
    async openDialog(uid) {
      this.updUserDialogVisible = true;
      await this.getUser(uid);
      await this.getRoles();
    }
  },
  created() {
    this.$bus.$on('openUserUpdDialog', uid => this.openDialog(uid))
  },
  destroyed() {
    this.$bus.$off('openUserUpdDialog')
  }
}
</script>
